import {
  ModalForm,
  ProFormGroup,
  ProFormInstance,
} from '@ant-design/pro-components';
import {
  ProForm,
  ProFormDigit,
  ProFormSelect,
  ProFormText,
  ProFormDatePicker,
} from '@ant-design/pro-components';
import ProLayout, {
  PageContainer,
  FooterToolbar,
} from '@ant-design/pro-layout';
import { history, useRequest } from 'umi';
import {
  DownOutlined,
  PlusOutlined,
  InboxOutlined,
  UpOutlined,
} from '@ant-design/icons';
import {
  message,
  Descriptions,
  Button,
  Upload,
  Breadcrumb,
  Space,
  Modal,
  Table,
} from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import type { UploadProps } from 'antd';
import { UploadOutlined, FileSearchOutlined } from '@ant-design/icons';
import { ProCard } from '@ant-design/pro-components';
import ProTable from '@ant-design/pro-table';
import { useBoolean } from 'ahooks';
import moment from 'moment';
import { getLabelAdapter, TitleAdapter } from '../../commons/Adapter';
import TbaleExplainMap from '@/components/TipsMap';

const { Dragger } = Upload;

const waitTime = (time: number = 100) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(true);
    }, time);
  });
};

export default () => {
  const formRef = useRef<ProFormInstance>();
  const addPersonFrom = useRef<ProFormInstance>();
  const [proTableData, setProTableData] = useState([]);
  const [pageType, setPageType] = useState(
    history.location.pathname.replace(
      '/LabAchievements/ScientificResearch/Monograph/EditMonograph/',
      '',
    ),
  );
  const [isExpand, { toggle }] = useBoolean(true);
  const [filedDisable, setFiledDisable] = useState({
    username: true,
    technicalGrade: true,
    technicalName: true,
    type: true,
  });
  const [descriptiondata, setDescriptionData] = useState<any>([]); //获取详情后，显示在description中
  const [selectKeys, setSelectKeys] = useState<any>(); //modal checkbox默认选中
  const [modalDataSource, setModalDataSource] = useState<any>(); //modal的数据源
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [saveType, setSaveType] = useState(''); //modal 点击确认 调用新增、更新还是暂存接口

  const props: UploadProps = {
    name: 'file',
    action: 'http://10.1.40.84:9993/common/uploadFile',
    headers: {
      Authorization: localStorage.getItem('token') || '',
    },
    maxCount: 1,
    accept: '.docx,.doc,.pdf,.xls',
    onChange(info) {
      if (info.file.status !== 'uploading') {
      }
      if (info.file.status === 'done') {
        if (info?.file?.response?.code == 200) {
          formRef.current?.setFieldsValue({
            annexPath: info?.file?.response.data,
          });
          message.success(`${info.file.name} 上传成功！`);
        } else if (info?.file?.response?.code == 401) {
          message.error('用户登录过期请重新登陆！');
        } else {
          message.error(`${info.file.name} 上传失败`);
        }
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败！`);
      }
    },
  };
  //获取专著详细信息
  const getOneBookDetail = useRequest(
    (data = null) => {
      return {
        url: `http://10.1.40.84:9998/bookAndReward/getOneBookDetail?id=${data}`,
        method: 'GET',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
      };
    },
    {
      manual: true,
      onSuccess: (result, params) => {
        setProTableData(result?.userDetail);
      },
    },
  );
  //暂存专著
  const insertTempBook = useRequest(
    (data = {}) => {
      return {
        url: `http://10.1.40.84:9998/bookAndReward/insertTempBook`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      onSuccess: (result: any) => {
        if (result.code === 200) {
          message.info('暂存后请在专著列表中查询');
          history.push('/LabAchievements/ScientificResearch/Monograph');
        } else {
          message.error(result.msg);
        }
      },
      manual: true,
      formatResult: (res) => res,
    },
  );
  //新增专著
  const newOneBook = useRequest(
    (data = {}) => {
      return {
        url: `http://10.1.40.84:9998/bookAndReward/insertNewBook`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
      onSuccess: (result, params) => {
        if (result.code === 200) {
          history.push('/LabAchievements/ScientificResearch/Monograph');
        } else {
          message.error(result.msg);
        }
      },
      formatResult: (res) => res,
    },
  );
  //更新专著详细信息
  const updateBook = useRequest(
    (data = {}) => {
      return {
        url: `http://10.1.40.84:9998/bookAndReward/updateBook`,
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
      onSuccess: (result, params) => {
        if (result.code === 200) {
          history.push('/LabAchievements/ScientificResearch/Monograph');
        } else {
          message.error(result.msg);
        }
      },
      formatResult: (res) => res,
    },
  );
  const columns: any = [
    {
      title: '工号',
      key: 'userid',
      dataIndex: 'userid',
    },
    {
      title: '姓名',
      key: 'username',
      dataIndex: 'username',
    },
    {
      title: '排名',
      dataIndex: 'userRank',
      key: 'userRank',
      valueType: 'digit',
    },
    {
      title: '类别',
      key: 'userType',
      dataIndex: 'userType',
    },
    {
      title: '身份',
      key: 'userIdentify',
      dataIndex: 'userIdentify',
    },
    {
      title: '职称等级',
      key: 'userJobLevel',
      dataIndex: 'userJobLevel',
    },
    {
      title: '职称名称',
      key: 'userJobTitle',
      dataIndex: 'userJobTitle',
    },
    {
      title: '人员类别',
      key: 'userType',
      dataIndex: 'userType',
    },
    {
      title: '操作',
      valueType: 'option',
      width: 200,
      render: (text: any, record: any, _: any) => [
        <a
          key="editable"
          onClick={() => {
            setProTableData(
              proTableData.filter(
                (item: any) => item.username !== record.username,
              ),
            );
            message.info('临时删除人员，确认人员名单后请提交！');
          }}
        >
          删除
        </a>,
      ],
    },
  ];
  //根据职称等级选择职称名称
  const getLike = useRequest(
    (data = { field: 'technicalName', level: '正高级' }) => {
      return {
        url: 'http://10.1.40.84:9993/getLike',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
  );
  //查找所有标签
  const getAllLabel = useRequest((data = {}) => {
    return {
      url: 'http://10.1.40.84:9993/getAllLabel',
      method: 'POST',
      headers: {
        Authorization: localStorage.getItem('token') || '',
      },
      data,
    };
  });
  //添加标签
  const addLabelDetail = useRequest(
    (data = {}) => {
      return {
        url: 'http://10.1.40.84:9993/addLabelDetail',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      onSuccess: (result, params) => {
        getAllLabel.run();
        message.success('添加成功');
      },
      manual: true,
    },
  );

  //根据名字查找人详细信息
  const findOneUserInfoDetailByName = useRequest(
    (data = {}) => {
      return {
        url: 'http://10.1.40.84:9993/user/findOneUserInfoDetailByName',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );
  const nameOnSearch = () => {
    findOneUserInfoDetailByName
      .run({ realName: addPersonFrom.current?.getFieldValue('realName') })
      .then((e) => {
        if (e !== null && e.length !== 0) {
          let filedDisableTemp: any = JSON.parse(JSON.stringify(filedDisable));
          Object.keys(e[0]).map((key: any) => {
            if (e[0][key] === null) {
              filedDisableTemp[`${key}`] = false;
            } else {
              filedDisableTemp[`${key}`] = true;
            }
          });
          setFiledDisable(filedDisableTemp);
          addPersonFrom.current?.setFieldsValue(e[0]);
        } else {
          setFiledDisable({
            username: false,
            technicalGrade: false,
            technicalName: false,
            type: false,
          });
          addPersonFrom.current?.resetFields();
          message.info('暂无此用户，自行填写信息');
        }
      });
  };
  //审核
  const updateStatusIpi = useRequest(
    (data = {}) => {
      return {
        url: 'http://10.1.40.84:9993/common/updateStatus',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
    },
  );
  //根据userList获取人员列表/user/getUserList
  const getUserList = useRequest(
    (data = {}) => {
      return {
        url: 'http://10.1.40.84:9993/user/getUserList',
        method: 'POST',
        headers: {
          Authorization: localStorage.getItem('token') || '',
        },
        data,
      };
    },
    {
      manual: true,
      onSuccess: (result) => {
        let resultTemp: any = [];
        result.map((item: any) => {
          resultTemp.push(item.webId);
        });
        setSelectKeys(resultTemp);
      },
    },
  );
  //向人员Modal中传递人员接口返回数据
  const showModal = (value: any) => {
    setModalDataSource(value);
    setIsModalVisible(true);
  };

  const handleOk = () => {
    let paramTemp: any = []; //获取选择的人员
    selectKeys.map((element: any) => {
      paramTemp.push(
        getUserList?.data.filter((item: any) => item.webId === element)[0],
      );
    });

    // 专著奖励特有的时间处理、人员编号和名称处理格式
    let formRefData: any = formRef.current?.getFieldsValue();
    //人员数据处理
    const dongFormatUserList: any[] = [];
    paramTemp.map((e: any) => {
      const { realName, username, technicalGrade, technicalName, ...roleData } =
        e;
      dongFormatUserList.push({
        userid: username,
        username: realName,
        userJobLevel: technicalGrade,
        userJobTitle: technicalName,
        ...roleData,
      });
    });
    //时间数据处理
    const { year, publishTime, ...formdata } = formRefData;
    const yeartemp = year ? moment(year).format('YYYY') : null;
    const publishTimetemp = publishTime
      ? moment(publishTime).format('YYYY-MM-DD')
      : null;

    if (saveType === '暂存') {
      insertTempBook.run({
        year: yeartemp,
        publishTime: publishTimetemp,
        ...formdata,
        userList: dongFormatUserList,
      });
    }

    if (saveType === '新增') {
      newOneBook.run({
        year: yeartemp,
        publishTime: publishTimetemp,
        ...formdata,
        userList: dongFormatUserList,
      });
    }
    if (saveType === '更新') {
      updateBook
        .run({
          year: yeartemp,
          publishTime: publishTimetemp,
          ...formdata,
          userList: dongFormatUserList,
        })
        .then(() => {
          if (localStorage.getItem('isEdit') === '审核') {
            updateStatusIpi
              .run({
                tableName: 'PAPER',
                ids: [pageType],
                status: 2, //审核通过
                tab: '子方向视角',
              })
              .then(() => {
                history.goBack();
                message.success('操作成功');
              });
          }
        });
    }
  };

  useEffect(() => {
    const IdTemp = history.location.pathname.replace(
      '/LabAchievements/ScientificResearch/Monograph/EditMonograph/',
      '',
    );
    setPageType(IdTemp);
    if (IdTemp !== 'new') {
      getOneBookDetail.run(pageType).then((data) => {
        formRef.current?.setFieldsValue(data);
        setDescriptionData(data);
      });
    }
  }, []);
  return (
    <PageContainer
      header={{
        title:
          getOneBookDetail?.data?.message &&
          getOneBookDetail?.data?.isPass != 4 ? (
            <div style={{ fontSize: 14, textAlign: 'center', color: 'red' }}>
              拒绝原因：{getOneBookDetail?.data?.message}
            </div>
          ) : null,
        breadcrumb: (
          <Breadcrumb>
            <Breadcrumb.Item>科学研究</Breadcrumb.Item>
            <Breadcrumb.Item>专著</Breadcrumb.Item>
            <Breadcrumb.Item>
              {TitleAdapter(pageType, localStorage.getItem('isEdit'), '专著')}
            </Breadcrumb.Item>
          </Breadcrumb>
        ),
      }}
      extra={
        <div>
          {localStorage.getItem('isEdit') === '审核' ? (
            <Space>
              <ModalForm
                title="拒绝"
                trigger={<Button key="2">返回成员修改</Button>}
                autoFocusFirstInput
                modalProps={{
                  onCancel: () => {},
                  destroyOnClose: true,
                }}
                submitTimeout={2000}
                onFinish={async (values) => {
                  updateStatusIpi
                    .run({
                      tableName: 'PAPER',
                      ids: [pageType],
                      status: 3, //拒绝
                      message: values.message,
                      tab: '子方向视角',
                    })
                    .then(() => {
                      history.goBack();
                      message.success('操作成功');
                    });
                  return true;
                }}
                grid={true}
                initialValues={{ message: getOneBookDetail?.data?.message }}
              >
                <ProForm.Group>
                  <ProFormText
                    name="message"
                    label="拒绝原因"
                    placeholder="请输入拒绝原因"
                    colProps={{ span: 24 }}
                    rules={[{ required: true, message: '请输入拒绝原因' }]}
                  />
                </ProForm.Group>
              </ModalForm>

              <Button
                key="1"
                type="primary"
                onClick={() => {
                  let formRefData: any = formRef.current?.getFieldsValue();
                  if (!formRefData?.annexPath) {
                    message.warning('请上传材料！');
                  } else {
                    if (pageType === 'new') {
                      setSaveType('新增');
                    } else {
                      setSaveType('更新');
                    }
                    getUserList
                      .run({
                        userList: formRefData.authors.replace(/，/g, ','),
                      }) //全局替换中文逗号为英文
                      .then((e) => {
                        showModal(e);
                      });
                  }
                }}
              >
                提交管理员审核
              </Button>
            </Space>
          ) : null}
        </div>
      }
      content={
        localStorage.getItem('isEdit') === '查看' ? (
          <Descriptions bordered>
            {localStorage.getItem('identity') === '管理员' ? (
              <>
                <Descriptions.Item
                  label="序号"
                  span={3}
                  labelStyle={{ width: 120 }}
                >
                  {descriptiondata?.seq}
                </Descriptions.Item>
                <Descriptions.Item
                  label="年度"
                  span={3}
                  labelStyle={{ width: 120 }}
                >
                  {descriptiondata?.year}
                </Descriptions.Item>
              </>
            ) : null}
            <Descriptions.Item
              label="专著类型"
              span={3}
              labelStyle={{ width: 120 }}
            >
              {descriptiondata?.bookType}
            </Descriptions.Item>
            <Descriptions.Item label="专著名称" span={3}>
              {descriptiondata?.bookName}
            </Descriptions.Item>
            <Descriptions.Item label="所有作者" span={3}>
              {descriptiondata?.authors}
            </Descriptions.Item>
            <Descriptions.Item label="出版社">
              {descriptiondata?.publisher}
            </Descriptions.Item>
            <Descriptions.Item label="出版日期" labelStyle={{ width: 150 }}>
              {descriptiondata?.publishTime
                ? moment(descriptiondata?.publishTime).format('YYYY-MM-DD')
                : null}
            </Descriptions.Item>
            <Descriptions.Item label="版号">
              {descriptiondata?.isbnCode}
            </Descriptions.Item>
            <Descriptions.Item label="总字数">
              {descriptiondata?.totalWord}
            </Descriptions.Item>
            <Descriptions.Item label="章、页">
              {descriptiondata?.chapterPage}
            </Descriptions.Item>
            <Descriptions.Item label="专著预览" span={1}>
              <a onClick={() => window.open(descriptiondata?.annexPath)}>
                点击查看
              </a>
            </Descriptions.Item>
            <Descriptions.Item label="完成情况">
              {descriptiondata?.completeState}
            </Descriptions.Item>
            <Descriptions.Item
              label="专著标签"
              span={localStorage.getItem('identity') !== '管理员' ? 0 : 2}
            >
              {getLabelAdapter(getAllLabel?.data, descriptiondata?.labelList)}
            </Descriptions.Item>
          </Descriptions>
        ) : (
          <>
            <ProForm
              grid={true}
              layout="vertical"
              onFinish={async (values) => {
                if (!values?.annexPath) {
                  message.warning('请上传材料！');
                } else {
                  //提交/暂存前先调用getUserList接口去校验人员信息
                  getUserList
                    .run({ userList: values.authors.replace(/，/g, ',') })
                    .then((e) => {
                      showModal(e);
                    })
                    .catch((e) => message.error('作者填写有误'));
                  if (pageType == 'new') {
                    setSaveType('新增');
                  } else {
                    setSaveType('更新');
                  }
                }
              }}
              formRef={formRef}
              autoFocusFirstInput
              submitter={{
                render: (_, dom) => (
                  <FooterToolbar>
                    {localStorage.getItem('isEdit') === '审核' ? null : (
                      <>
                        {pageType === 'new' ||
                        getOneBookDetail?.data?.isPass + '' === '-1' ? (
                          <Button
                            // type="primary"
                            onClick={() => {
                              setSaveType('暂存');
                              let values = formRef.current?.getFieldsValue();
                              if (values?.authors) {
                                getUserList
                                  .run({
                                    userList: values.authors.replace(
                                      /，/g,
                                      ',',
                                    ),
                                  })
                                  .then((e) => {
                                    showModal(e);
                                  })
                                  .catch((e) => message.error('作者填写有误'));
                              } else {
                                const { year, publishTime, ...formdata } =
                                  formRef.current?.getFieldsValue();
                                insertTempBook.run({
                                  year: year
                                    ? moment(year).format('YYYY')
                                    : null,
                                  publishTime: publishTime
                                    ? moment(publishTime).format('YYYY-MM-DD')
                                    : null,
                                  ...formdata,
                                });
                              }
                            }}
                          >
                            暂存
                          </Button>
                        ) : null}
                        <Button
                          type="primary"
                          onClick={() => {
                            formRef.current?.submit();
                          }}
                        >
                          提交
                        </Button>
                      </>
                    )}
                  </FooterToolbar>
                ),
              }}
            >
              <ProFormDigit name={'id'} label={'编号'} hidden />
              <ProFormText name={'annexPath'} label={'材料地址'} hidden />
              <ProFormSelect
                name={'isPass'}
                label={'审核情况'}
                colProps={{ span: 6 }}
                placeholder="待审核"
                options={[
                  {
                    value: '0',
                    label: '缺失附件',
                  },
                  {
                    value: '1',
                    label: '审核中',
                  },
                  {
                    value: '2',
                    label: '审核通过',
                  },
                  {
                    value: '3',
                    label: '审核失败',
                  },
                ]}
                disabled
                hidden
              />
              <ProFormText
                name={'annexPath'}
                label={'专著预览地址'}
                colProps={{ span: 8 }}
                hidden
              />
              <ProForm.Group title={'基本信息'}>
                <ProFormText
                  disabled
                  name="seq"
                  label="序号"
                  colProps={{ span: 4 }}
                  hidden={true}
                />
                <ProFormText
                  name={'bookName'}
                  label={'专著名称'}
                  colProps={{
                    span: 6,
                  }}
                  required
                  rules={[{ required: true, message: '请输入' }]}
                />
                <ProFormText
                  name={'authors'}
                  label={'所有作者（学生姓名后标*，外单位人员姓名后标#）'}
                  colProps={{
                    span: 6,
                  }}
                  rules={[{ required: true, message: '请输入' }]}
                  placeholder="请输入，以英文逗号分隔"
                />
                <ProFormSelect
                  name={'completeState'}
                  label={'完成情况'}
                  colProps={{ span: 3 }}
                  rules={[
                    {
                      required: localStorage.getItem('identity') === '管理员',
                      message: '请选择',
                    },
                  ]}
                  options={[
                    {
                      value: '独立完成',
                      label: '独立完成',
                    },
                    {
                      value: '第一完成人(非独立完成)',
                      label: '第一完成人(非独立完成)',
                    },
                    {
                      value: '非第一完成人(非独立完成)',
                      label: '非第一完成人(非独立完成)',
                    },
                  ]}
                  hidden={localStorage.getItem('identity') !== '管理员'}
                />

                <ProForm.Group title={'详细内容'}>
                  <ProFormDatePicker
                    name={'year'}
                    label={'年度'}
                    colProps={{ span: 3 }}
                    hidden={localStorage.getItem('identity') !== '管理员'}
                    fieldProps={{
                      picker: 'year',
                      format: 'YYYY',
                    }}
                  />
                  <ProFormText
                    name={'publisher'}
                    label={'出版社名称'}
                    colProps={{ span: 3 }}
                    rules={[{ required: true, message: '请输入' }]}
                  />
                  <ProFormDatePicker
                    name={'publishTime'}
                    label={'出版日期'}
                    colProps={{ span: 3 }}
                    required
                    fieldProps={{
                      format: 'YYYY-MM-DD',
                    }}
                    rules={[{ required: true, message: '请选择' }]}
                    // addonAfter={
                    //   // <a>{isExpand?({"展开其他信息"}<DownOutlined />):}</a>,
                    //   <a
                    //     onClick={() => {
                    //       toggle();
                    //     }}
                    //   >
                    //     {!isExpand ? '展开其他信息' : '收起其他信息'}
                    //     {!isExpand ? <DownOutlined /> : <UpOutlined />}
                    //   </a>
                    // }
                  />
                </ProForm.Group>

                <ProFormSelect
                  name={'bookType'}
                  options={[
                    {
                      value: '学术专著',
                      label: '学术专著',
                    },
                    {
                      value: '学术译著',
                      label: '学术译著',
                    },
                    {
                      value: '教材',
                      label: '教材',
                    },
                  ]}
                  label={'专著类型'}
                  colProps={{
                    span: 3,
                  }}
                  required
                  rules={[{ required: true, message: '请选择' }]}
                />
                <ProFormText
                  name={'chapterPage'}
                  label={'章、页'}
                  colProps={{ span: 3 }}
                />
                <ProFormText
                  name={'isbnCode'}
                  label={'ISBN码'}
                  colProps={{ span: 3 }}
                  rules={[{ required: true, message: '请输入' }]}
                />
                <ProFormDigit
                  name={'totalWord'}
                  label={'总字数'}
                  colProps={{ span: 3 }}
                  rules={[{ required: true, message: '请输入' }]}
                />
              </ProForm.Group>

              <ProFormGroup title={'佐证材料'}>
                <ProFormSelect
                  name="labelList"
                  // style={{ width: 600 }}
                  colProps={{ span: 24 }}
                  options={getAllLabel?.data}
                  mode="tags"
                  label="专著标签"
                  hidden={localStorage.getItem('identity') !== '管理员'}
                  addonAfter={
                    <ModalForm<{
                      year: string;
                      labelName: string;
                    }>
                      title="新增标签"
                      trigger={<a>新增标签</a>}
                      autoFocusFirstInput
                      modalProps={{
                        onCancel: () => {},
                      }}
                      submitTimeout={2000}
                      onFinish={async (values) => {
                        addLabelDetail.run(values);
                        return true;
                      }}
                    >
                      <ProForm.Group>
                        <ProFormDatePicker.Year
                          width="md"
                          name="year"
                          label="标签年份"
                          required
                        />
                        <ProFormText
                          width="md"
                          name="labelName"
                          label="标签名称"
                          required
                        />
                      </ProForm.Group>
                    </ModalForm>
                  }
                  allowClear={false}
                />
                <ModalForm
                  title="上传材料"
                  trigger={
                    <Button icon={<UploadOutlined />} type="link">
                      上传材料（上传专著的封面，以专著名称命名）
                    </Button>
                  }
                  autoFocusFirstInput
                  submitTimeout={2000}
                  onFinish={async (values) => true}
                >
                  <ProCard title={TbaleExplainMap['BOOK_PUBLISH']}>
                    {/* 有小问题，需要修改成pro的dragger */}
                    <Dragger {...props} maxCount={1}>
                      <p className="ant-upload-drag-icon">
                        <InboxOutlined />
                      </p>
                      <p className="ant-upload-text">
                        单击或拖动文件到此区域进行上传
                      </p>
                      <p className="ant-upload-hint">请上传一个文件</p>
                    </Dragger>
                  </ProCard>
                </ModalForm>
                <Button
                  type="link"
                  onClick={() => {
                    descriptiondata?.annexPath
                      ? window.open(descriptiondata?.annexPath)
                      : message.info('请上传材料');
                  }}
                  icon={<FileSearchOutlined />}
                >
                  查看材料
                </Button>
              </ProFormGroup>
            </ProForm>
            <ProCard.Divider></ProCard.Divider>
            {/* 隐藏或删除人员列表 */}
            <ProCard
              hidden
              title={<strong>人员信息</strong>}
              extra={
                <Space>
                  <ModalForm<{
                    name: string;
                    company: string;
                  }>
                    title="添加人员"
                    trigger={
                      <Button
                        key="button"
                        // size="small"
                        icon={<PlusOutlined />}
                        type="primary"
                      >
                        新增人员
                      </Button>
                    }
                    autoFocusFirstInput
                    modalProps={{
                      onCancel: () => {
                        setFiledDisable({
                          username: true,
                          technicalGrade: true,
                          technicalName: true,
                          type: true,
                        });
                        addPersonFrom.current?.resetFields();
                      },
                    }}
                    submitTimeout={2000}
                    onFinish={async (values: any) => {
                      await waitTime(1000);
                      let proTableDataTemp: any = JSON.parse(
                        JSON.stringify(proTableData || []),
                      );
                      const {
                        realName,
                        username,
                        technicalGrade,
                        technicalName,
                        ...roleData
                      } = values;
                      proTableDataTemp.push({
                        userid: username,
                        username: realName,
                        userJobLevel: technicalGrade,
                        userJobTitle: technicalName,
                        ...roleData,
                      });
                      setProTableData(proTableDataTemp);
                      message.success('临时添加人员，确认人员名单后请提交！');
                      return true;
                    }}
                    formRef={addPersonFrom}
                  >
                    <ProForm.Group>
                      <ProFormText
                        width="md"
                        name="realName"
                        required
                        label="人员名称"
                        addonAfter={[
                          <Button
                            type="primary"
                            key={'search'}
                            onClick={nameOnSearch}
                          >
                            检索用户
                          </Button>,
                        ]}
                      />
                    </ProForm.Group>
                    <ProForm.Group>
                      <ProFormText
                        width="xs"
                        name="username"
                        label="人员工号"
                        disabled={filedDisable.username}
                        required
                      />
                      <ProFormSelect
                        request={async () => [
                          {
                            value: '正高级',
                            label: '正高级',
                          },
                          {
                            value: '副高级',
                            label: '副高级',
                          },
                          {
                            value: '中级',
                            label: '中级',
                          },
                          {
                            value: '初级',
                            label: '初级',
                          },
                        ]}
                        width="xs"
                        name="technicalGrade"
                        label="职称等级"
                        disabled={filedDisable?.technicalGrade}
                        required
                        fieldProps={{
                          onChange: (e) => {
                            getLike.run({ field: 'technicalName', level: e });
                            addPersonFrom.current?.setFieldsValue({
                              technicalName: null,
                            });
                          },
                        }}
                      />
                      <ProFormSelect
                        width="sm"
                        name="technicalName"
                        label="人员职称"
                        disabled={filedDisable.technicalName}
                        required
                        fieldProps={{
                          options: getLike.data,
                        }}
                      />
                      <ProFormSelect
                        request={async () => [
                          {
                            value: '固定人员',
                            label: '固定人员',
                          },
                          {
                            value: '流动人员',
                            label: '流动人员',
                          },
                          {
                            value: '学生',
                            label: '学生',
                          },
                          {
                            value: '非本室人员',
                            label: '非本室人员',
                          },
                        ]}
                        width="sm"
                        name="userType"
                        label="人员类别"
                        disabled={filedDisable.type}
                        required
                      />
                    </ProForm.Group>
                    <ProForm.Group>
                      <ProFormDigit
                        width="xs"
                        label="人员排名"
                        name="userRank"
                        min={1}
                        max={10}
                        fieldProps={{ precision: 0 }}
                        required
                      />
                      <ProFormSelect
                        request={async () => [
                          {
                            value: '独立完成',
                            label: '独立完成',
                          },
                          {
                            value: '第一完成人(非独立完成)',
                            label: '第一完成人(非独立完成)',
                          },
                          {
                            value: '非第一完成人(非独立完成)',
                            label: '非第一完成人(非独立完成)',
                          },
                        ]}
                        width="sm"
                        name="completeState"
                        label="完成情况"
                        required
                      />
                      <ProFormSelect
                        request={async () => [
                          {
                            value: '第一作者',
                            label: '第一作者',
                          },
                          {
                            value: '通讯作者',
                            label: '通讯作者',
                          },
                          {
                            value: '其他',
                            label: '其他',
                          },
                        ]}
                        width="md"
                        name="userIdentify"
                        label="人员身份"
                        required
                      />
                    </ProForm.Group>
                  </ModalForm>
                </Space>
              }
            >
              <ProTable
                // name={'table'}
                rowKey={'username'}
                columns={columns}
                search={false}
                dataSource={proTableData}
                toolBarRender={false}
              />
            </ProCard>
          </>
        )
      }
    >
      <Modal
        title="请确认人员！"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={() => setIsModalVisible(false)}
        forceRender
      >
        <Table
          size="small"
          pagination={{ hideOnSinglePage: true, pageSize: 10 }}
          rowKey={'webId'}
          rowSelection={{
            onChange: (
              selectedRowKeys: React.Key[],
              selectedRows: DataType[],
            ) => {
              setSelectKeys(selectedRowKeys);
            },
            selectedRowKeys: selectKeys,
          }}
          columns={[
            {
              title: '工号',
              dataIndex: 'username',
              key: 'username',
            },
            {
              title: '姓名',
              dataIndex: 'realName',
              key: 'realName',
            },
            {
              title: '人员类型',
              dataIndex: 'userType',
              key: 'userType',
            },
          ]}
          dataSource={modalDataSource}
        />
      </Modal>
    </PageContainer>
  );
};
